---
title: Etiqueta
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Component per categoritzar o etiquetar contingut de manera visual.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Props     | Tipus  | Descripció                                                                                                                                                           |
| --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className | cadena | Nom opcional per a un estil addicional                                                                                                                               |
| color     | cadena | Color de l'etiqueta. Les opcions inclouen: `verd`, `turquesa`, `cel`, `blau`, `porpra`, `rosa`, `vermell`, `taronja`, `groc`, `gris` |
| text      | cadena | El contingut de l'etiqueta                                                                                                                                           |
| onClick   | funció | Funció opcional que es crida quan un usuari fa clic a l'etiqueta                                                                                                     |

</Tab>

</Tabs>
